<script setup>
import { useCounterStore } from "@/store/counter.js";
const counterStore = useCounterStore();
</script>
<template>
  <div class="header">
    <input
      @keyup.enter="counterStore.add"
      v-model="counterStore.inp"
      type="text"
      placeholder="Add new todo..."
    />
    <button @click="counterStore.add">submit</button>
  </div>
</template>
<style scoped>
.header {
  width: 200px;
  height: 40px;
  margin: auto;
  display: flex;
  align-items: center;
}
.header input {
  flex: 1;
  height: 80%;
  border: 0;
  border-bottom: 3px dotted #ffb7b1;
  background-color: #f2f2f2;
  margin-right: 20px;
  outline: none;
}
.header button {
  width: 100px;
  height: 80%;
}
</style>
